import { CockpitChartBaseProps } from "../helps";
import React from "react";
import * as echarts from "echarts";
export interface KxInvestmentBeforeAmountBarChart
  extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxInvestmentBeforeAmountBarChartOption = ({
  dataSource = [],
}: KxInvestmentBeforeAmountBarChart): EChartsOption => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "4%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      data: [
        "项目总投资（万元）",
        "本年前累计完成投资（万元）",
        "本年度计划投资（万元）",
        "本月完成投资（万元）",
      ],
      // left: 10,
      top: 12,
      textStyle: {
        fontSize: 14,
        color: "#FDFFFF",
      },
      itemWidth: 19,
      itemHeight: 6,
      itemGap: 35,
    },
    xAxis: {
      type: "category",
      data: dataSource.map((d) => d.name || ""),
      axisLine: {
        show: false,
        //  lineStyle: {
        //    color: 'white'

        //  }
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        fontSize: 14,
        color: "#FFFFFF",
        margin: 10,
        interval: 0,

        width: 100,
        overflow: "break",
      },
    },

    yAxis: {
      name: "万元",
      nameTextStyle: {
        color: "#FDFFFF",
        fontSize: 14,
        opacity: 0.8,
      },
      type: "value",
      //  max:'1200',
      axisLine: {
        show: false,
        lineStyle: {},
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#FEFFFF",
          opacity: 0.1,
        },
      },
      axisLabel: {
        fontSize: 14,
        fontFamily: "Arial",
        color: "#FDFFFF",
        opacity: 0.8,
      },
    },
    series: [
      {
        name: "项目总投资（万元）",
        type: "bar",
        barWidth: 8,
        barGap: "140%",

        itemStyle: {
          borderRadius: 12,

          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#39A1F5",
            },
            {
              offset: 1,
              color: "#04FFFF",
            },
          ]),
        },
        data: dataSource.map((d) => d.amount || 0),
      },
      {
        name: "本年前累计完成投资（万元）",
        type: "bar",
        barWidth: 8,
        barGap: "140%",

        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#1ED94F",
            },
            {
              offset: 1,
              color: "#F2F047",
            },
          ]),
          borderRadius: 11,
        },
        data: dataSource.map((d) => d.beforeAmount || "-"),
      },
      {
        name: "本年度计划投资（万元）",
        type: "bar",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#38F8D4",
            },
            {
              offset: 1,
              color: "#43EA80",
            },
          ]),
          borderRadius: 11,
        },
        data: dataSource.map((d) => d.yearAmount || "-"),
      },
      {
        name: "本月完成或投资（万元）",
        type: "bar",
        barWidth: 8,
        barGap: "140%",
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#4760FF",
            },
            {
              offset: 1,
              color: "#0DCCFF",
            },
          ]),
          borderRadius: 11,
        },
        data: dataSource.map((d) => d.monthAmount || "-"),
      },
    ],
  };
};

const KxInvestmentBeforeAmountBarChart = ({
  reactEChartsProps,
  dataSource,
}: KxInvestmentBeforeAmountBarChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "463px",
      }}
      option={getKxInvestmentBeforeAmountBarChartOption({
        dataSource,
      })}
    />
  );
};

export default KxInvestmentBeforeAmountBarChart;
